<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/amazeui.min.css">
    <link rel="stylesheet" href="css/petshow.css?6">
    <link rel="stylesheet" href="css/animate.min.css">
	<script src="lib/jquery/jquery-3.2.1.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/amazeui.min.js"></script>
    <script src="js/amazeui.lazyload.min.js"></script>
    
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页-商家</title>
<link href="bootstrap.min.css" rel="stylesheet">
<style type="text/css">
#header{
width:100%;
height:200px;
margin:0 auto;
background:yellow;
}
.shoplist{
width:1024px;
height:1100px;
margin-top:50px;
margin:0 auto;
background:pink;
margin-bottom:20px;
}
.shop{
width:300px;
height:300px;
margin:0 auto;
margin-top:30px;

background:blue;
float:left;
}

#footer{
width:100%;
margin-top:110px;
margin:0 auto;
background:grey;
height:100px;
}
.btn{
width:30px;
margin:0 auto;
height:30px;
margin-top:320px;

}
</style>
</head>
<body>

<header class="am-topbar am-topbar-inverse">
    <div class="amz-container">
        <h1 class="am-topbar-brand">
            <a href="#" class="am-topbar-logo">
                <img src="img/foodLogo.jpg?1" alt="">
            </a>
        </h1>
        <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
        data-am-collapse="{target: '#doc-topbar-collapse-5'}">
            <span class="am-sr-only">
                导航切换
            </span>
            <span class="am-icon-bars">
            </span>
        </button>
        <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse-5">
            <ul class="am-nav am-nav-pills am-topbar-nav">
                <li class="am-active">
                    <a href="shops.jsp">
                        首页
                    </a>
                </li>
                <li class="am-dropdown" data-am-dropdown="">
                    <a class="am-dropdown-toggle" data-am-dropdown-toggle="" href="UserInfo.jsp">
                        个人中心
                        <span class="am-icon-caret-down">
                        </span>
                    </a>
                    <ul class="am-dropdown-content">
                        <li>
                            <a href="UserInfo.jsp">
                                收货地址
                            </a>
                        </li>
                        <li>
                            <a href="UserInfo.jsp">
                                我的收藏
                            </a>
                        </li>
                        <li>
                            <a href="UserInfo.jsp">
                                全部订单
                            </a>
                        </li>
                        <li>
                            <a href="UserInfo.jsp">
                                每日精选
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="cart.jsp">
                        我的购物车
                    </a>
                </li>
                <li>
                    <a href="#">
                        注销
                    </a>
                </li>
                <li class="am-dropdown" data-am-dropdown="">
                    <a class="am-dropdown-toggle" data-am-dropdown-toggle="" href="javascript:;">
                        加盟合作
                        <span class="am-icon-caret-down">
                        </span>
                    </a>
                    <ul class="am-dropdown-content">
                        <li>
                            <a href="BusinessRegist.jsp">
                                商家入驻
                            </a>
                        </li>
                        <li>
                            <a href="BusinessRegist.jsp">
                                配送加盟
                            </a>
                        </li>
                        <li>
                            <a href="BusinessRegist.jsp">
                                媒体公关
                            </a>
                        </li>
                        <li>
                            <a href="BusinessRegist.jsp">
                                代理申请
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</header>
<div class="row">
	<div class="col-md-2" style="border: #0E93D7 solid 1px;">
		<div>---1----</div>
		<div>---2----</div>
		<div>---3----</div>
		<div>---4----</div>

	</div>
	<div class="col-md-8">
		<div data-am-widget="tabs" class="am-tabs am-tabs-d2 am_news_tab">
		  <ul class="am-tabs-nav am-cf am_cf">
		    <li class="am-active">
		      <a href="[data-tab-panel-0]">美食</a>
		    </li>
		    <li class="">
		      <a href="[data-tab-panel-1]">甜品饮品</a>
		    </li>
		    <li class="">
		      <a href="[data-tab-panel-2]">商超便利</a>
		    </li>
		
		  </ul>
		  菜  名：<input type="text" id="dishName" />
		  菜品种类（1，2）：<input type="text" id="dishType"/>
		  <button id="search">查询</button>
		  <table  class="table table-striped" id="content">
		  	<tr><th>菜品图片</th><th>菜品编号</th><th>菜  名</th><th>菜品类别</th><th>菜品价格</th><th>操作</th></tr>
		  	<!--在script中填充了数据-->	  
		  </table>
		  <div class="am-tabs-bd">
		    <div data-tab-panel-0 class="am-tab-panel am-active">
				<div class="am-list-news-bd am_news_list_all">
				<ul class="am-list">
				<!--缩略图在标题左边-->
		
					<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left am_list_li">
						
					</li>          
				</ul>
				<div class="am_news_load"><span><i  class="am-icon-spinner am-icon-spin"></i> 更多美味</span></div>
				</div>
		    </div>
		  <div data-tab-panel-2 class="am-tab-panel ">
		
		
		
		  <div class="am-list-news-bd am_news_list_all">
		    <ul class="am-list">
		      <!--缩略图在标题左边-->
		      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left am_list_li">
		        <div class="am-u-sm-3 am-list-thumb am_list_thumb">
		          <a href="###" class="">
		            <img src="img/c.png" class="am_news_list_img" alt="我很囧，你保重....晒晒旅行中的那些囧！"
		            />
		          </a>
		        </div>
		        <div class=" am-u-sm-9 am-list-main am_list_main">
		          <h3 class="am-list-item-hd am_list_title">
		            <a href="###" class="">店铺名</a>
		          </h3>
		          <div class="am_list_author"><a href="javascript:void(0)"><span class="am_list_author_ico" style="background-image: url(img/tx.jpg);"></span><span class="name">Okaeri</span></a><span class="am_news_time">&nbsp;•&nbsp;<time class="timeago" title="2015-08-13 08:02:40 +0800" datetime="2015-08-13 08:02:40 +0800"> 2 小时前</time></span></div>
		          <div class="am-list-item-text am_list_item_text ">店铺简介</div>
		        </div>
		      </li>
		    
		            <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left am_list_li">
		        <div class="am-u-sm-3 am-list-thumb am_list_thumb">
		          <a href="###" class="">
		            <img src="img/y.png" class="am_news_list_img" alt="我很囧，你保重....晒晒旅行中的那些囧！"
		            />
		          </a>
		        </div>
		        <div class=" am-u-sm-9 am-list-main am_list_main">
		          <h3 class="am-list-item-hd am_list_title">
		            <a href="###" class="">店铺名</a>
		          </h3>
		          <div class="am_list_author"><a href="javascript:void(0)"><span class="am_list_author_ico" style="background-image: url(img/tx.jpg);"></span><span class="name">Okaeri</span></a><span class="am_news_time">&nbsp;•&nbsp;<time class="timeago" title="2015-08-13 08:02:40 +0800" datetime="2015-08-13 08:02:40 +0800"> 2 小时前</time></span></div>
		          <div class="am-list-item-text am_list_item_text ">店铺简介</div>
		        </div>
		      </li>
		                  <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left am_list_li">
		        <div class="am-u-sm-3 am-list-thumb am_list_thumb">
		          <a href="###" class="">
		            <img src="img/d.png" class="am_news_list_img" alt="我很囧，你保重....晒晒旅行中的那些囧！"/>
		          </a>
		        </div>
		        <div class=" am-u-sm-9 am-list-main am_list_main">
		          <h3 class="am-list-item-hd am_list_title">
		            <a href="###" class="">店铺名</a>
		          </h3>
		          <div class="am_list_author"><a href="javascript:void(0)"><span class="am_list_author_ico" style="background-image: url(img/tx.jpg);"></span><span class="name">Okaeri</span></a><span class="am_news_time">&nbsp;•&nbsp;<time class="timeago" title="2015-08-13 08:02:40 +0800" datetime="2015-08-13 08:02:40 +0800"> 2 小时前</time></span></div>
		          <div class="am-list-item-text am_list_item_text ">店铺简介</div>
		        </div>
		      </li>
		    </ul>
		    <div class="am_news_load"><span><i  class="am-icon-spinner am-icon-spin"></i> 更多美味</span></div>
		  </div>
		 </div>
		</div>
		</div>
	</div>
</div>


<footer class="am_footer">
<div class="am_footer_con">
<div class="am_footer_link">
<span>关于食否</span>
<ul>
  <li><a href="###">关于我们</a></li>
  <li><a href="###">发展历程</a></li>
  <li><a href="###">友情链接</a></li>
</ul>
</div>


<div class="am_footer_don">
<span>食否</span>
<dl>
  <dt><img src="img/foodLogo.jpg?1" alt=""></dt>
  <dd>为您提供各类美食网上订餐服务，覆盖周边100余家餐厅，中餐、西餐、美食小吃、快餐、火锅、川菜应有尽有，不用出门即可享受各地区各种类美食！
  <a href="###" class="footdon_pg "><div class="foot_d_pg am-icon-apple ">  App store</div></a><a href="###" class="footdon_az animated"><div class="foot_d_az am-icon-android ">  Android</div></a></dd>

</dl>
</div>

<div class="am_footer_erweima">
<div class="am_footer_weixin"><img src="img/wx2.jpg" alt=""><div class="am_footer_d_gzwx am-icon-weixin"> 关注微信</div></div>
<div class="am_footer_ddon"><img src="img/wx.jpg" alt=""><div class="am_footer_d_dxz am-icon-cloud-download"> 扫码下载</div></div>

</div>

</div>
<div class="am_info_line">Copyright(c)2017 <span>ShiFou</span> All Rights Reserved </div>
</footer>
<script>
 $(function(){
  $('.am_news_tab').css('min-height',$(window).height() - 52 - 220);
  if ($(window).width() < 600 ) {
 $('.am_list_item_text').each(
  function(){
     if($(this).text().length >= 26){
        $(this).html($(this).text().substr(0,26)+'...');
     }});}

});
</script>
<script>
		window.onload=function(){
			$.ajax({
				url:'http://localhost:9523/eto/dishes/list',
				dataType:'json',//服务器返回json格式数据
				type:'get',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				success:function(data){
					console.log(data)
					$("#dishPrice").text(data[0].dishPrice)
					let str = ""
					for(let i=0;i<data.length;i++){
						str+="<tr><td><img src='img/1.png' alt='aaaa' class='img-thumbnail' style='height: 100px;'></td><td>"+data[i].dishNo+"</td><td>"+data[i].dishName+"</td><td>"+data[i].dishTypeNumber+"</td><td>"+data[i].dishPicture+"</td><td>"+data[i].dishPrice+"</td><td><button type='button' class='btn-info'>收藏</button>&nbsp;<button type='button' class='btn-success'>下单</button></td></tr>"+"<br/>"

					}
					$("#content").append(str)
					
				},
				error:function(xhr,type,errorThrown){
					
				}
			});
		}
		$("#search").click(function(){
			$.ajax({
				url:'http://localhost:9523/eto/dishes/list',
				data:{
					name:$("#dishName").val(),
					type:$("dishType").val()
				},
				dataType:'json',//服务器返回json格式数据
				type:'get',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				success:function(data){
					console.log(data)
					let str = ""
					$("#content").text(str)
					for(let i=0;i<data.length;i++){
						str+="<tr><td><img src='"+data[i].dishPicture+"' alt='aaaa' class='img-thumbnail' style='height: 100px;'></td><td>"+data[i].dishNo+"</td><td>"+data[i].dishName+"</td><td>"+data[i].dishTypeNumber+"</td><td>"+data[i].dishPrice+"</td><td><button type='button' class='btn-info'>收藏</button>&nbsp;<button type='button' class='btn-success'>下单</button></td></tr>"+"<br/>"
					}
					$("#content").append(str)
					
					
				},
				error:function(xhr,type,errorThrown){
					console.log(errorThrown)
				}
			});
		})
	</script>
</body>
</html>